import React from "react";

// Components
import {
    Button,
    Card,
    CardBody,
    CardHeader,
    CardTitle,
    Col,
    Container,
    Row
} from "reactstrap";
import { Calendar, Filter, RefreshCw, Settings } from "react-feather";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";

// Assets
import avatar4 from "../../../assets/img/avatars/avatar.png";

// import { tableData, tableColumns } from "../companydata/CompanyUsersData";


/*
* Company Profile view
*
* This view is responsible of displaying all team members within
* an organization, similar to PartnerView.js
*
* TODO: Needs to be implemented
* */
const ProfileDetails = () => (
    <Card>
        <CardHeader>
            <h1 className="mb-0 h3">
                Company
            </h1>
        </CardHeader>
        <CardBody className="text-center">
            <img
                src={avatar4}
                alt="Varun ameta"
                className="img-fluid rounded-circle mb-2"
                width="128"
                height="128"
            />

        </CardBody>

        <br />

        <CardBody>
            <CardTitle tag="h6" >Company Name</CardTitle>
            <h4 className="mb-0">Company Name</h4>
        </CardBody>
        <hr className="my-0" />


        <CardBody>
            <CardTitle tag="h6" >Company Contact</CardTitle>
            <h4 className="mb-0">Company Contact</h4>
        </CardBody>
        <hr className="my-0" />

        <CardBody>
            <p>Description of Company info. Description of Company info.
                Description of Company info.</p>
            <p>Description of Company info. Description of Company info.
                Description of Company info.</p>
        </CardBody>


    </Card>
);



const Activities = () => {
    const selectRow = {
        mode: "checkbox",
        clickToSelect: true,
        bgColor: "#f8f9fa"
    };

    return (
        <Card>

            <CardHeader>
                <CardTitle tag="h5">Users  &nbsp;
                    <Button className=" btn-rounded">+</Button>
                </CardTitle>

            </CardHeader>
            <CardBody>
                <BootstrapTable
                    bootstrap4
                    bordered={false}
                    keyField="select"
                    data={tableData}
                    columns={tableColumns}
                    selectRow={selectRow}
                    pagination={paginationFactory({
                        sizePerPage: 5,
                        sizePerPageList: [5, 10, 25, 50]
                    })}
                />
            </CardBody>
        </Card>
    );
};

const EditCompany = () => (

    <Container fluid className="p-0">
        <Row className="mb-2 mb-xl-4">


            <Col xs="auto" className="ml-auto text-right mt-n1">


                <Button color="primary" className="shadow-sm mr-1">
                    <Filter className="feather" />
                </Button>
                <Button color="primary" className="shadow-sm">
                    <Settings className="feather" />
                </Button>

            </Col>
        </Row>

        <Row>
            <Col md="4" xl="3">
                <ProfileDetails />
            </Col>
            <Col md="8" xl="9">
                <Activities />
            </Col>
        </Row>
    </Container>
);

export default EditCompany;
